<template>
    <div>
      <el-button type="primary" @click="showAddressBook" class="danger-btn" size="medium" style="margin: 0 10px 20px 10px">添加</el-button>
      <el-table :data="activityList" highlight-current-row class="el-table-style">
        <el-table-column type="index" width="75" sortable></el-table-column>
        <el-table-column prop="real_name" label="姓名" sortable></el-table-column>
        <el-table-column prop="phone" label="手机" sortable></el-table-column>
        <el-table-column prop="created_at" label="创建时间" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" class="danger-btn" size="mini" @click="delAddressBook(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="footer-bar">
        <div class="page-code">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </el-col>
      <!--    添加通讯录-->
      <el-dialog title="添加" :visible.sync="addFormVisible" width="30%">
        <el-form label-width="110px" label-position="left">
          <el-form-item label="姓名">
            <el-input v-model="addMailForm.real_name" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="addMailForm.phone" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAddressBook">确认</el-button>
            <el-button @click.native="addFormVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "mailList",
      data(){
          return{
            addFormVisible : false,
            addMailForm:{},
            activityList:[],
            page: 1,
            pagesize: 10,
            total: 0
          }
      },
      mounted(){
        this.getAddressBookList();
      },
      methods:{
        //获取通讯录列表
        async getAddressBookList(){
          let params = {
            page: this.page,
            limit: this.pagesize
          }
          const res = await this.$api.getAddressBookList(params);
          if (res.data.level == 'success'){
            this.activityList = res.data.data;
            this.$parent.mailList = res.data.data;
            this.total = res.data.page_info.total;
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //添加通讯录
        async addAddressBook(){
          let params = this.addMailForm;
          const res = await this.$api.addAddressBook(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.addFormVisible = false;
            this.addMailForm = {};
            this.getAddressBookList();
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //删除通讯录
        async delAddressBook(id){
          let params = {
            id: id
          }
          const res = await this.$api.delAddressBook(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.getAddressBookList();
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //添加按钮事件
        showAddressBook() {
          this.addFormVisible = true;
        },
        //分页按钮显示
        currentChange(id){
          this.page = id;
          this.getAddressBookList();
        }
      }
    }
</script>

<style scoped>

</style>
